<template>
  <view>
    <nav-bar title="积分商城"></nav-bar>
    <view class="u-demo-block">
      <u-swiper 
        :list="list5" 
        @change="change" 
        :autoplay="true" 
        radius="8" 
        height="180" 
        interval="5000" 
        :indicator="true">
        <view slot="indicator" class="indicator">
          <view class="indicator__dot" v-for="(item, index) in list5" :key="index"
            :class="[index === current && 'indicator__dot--active']">
          </view>
        </view>
      </u-swiper>
    </view>
	<view class="flex" style="background-color: #fff;">
		<scroll-view scroll-x :style="{width:'calc(100% - 200rpx)'}">
		    <view class="tabs-box">
		      <view
		        v-for="(item, index) in tabList"
		        :key="index"
		        :class="['tabs-item', tabActive === item.value ? 'active-item' : '']"
		        @click="clickTabsItem(item)"
		      >
		        <view class="item">{{ item.label }}</view>
		        <view v-if="tabActive === item.value" class="bottom-line"></view>
		      </view>
		    </view>
		</scroll-view>
		<view class="flex flex1" >
			<view class="box flexJcac" @click="toCar">
				<u-icon name="shopping-cart-fill" size="28"></u-icon>
			 	<text class="badge">99+</text>
			 </view>
			<view class="box flexJcac">
				<u-icon name="file-text" size="28"></u-icon>
				<text class="badge">99+</text>
			</view>
		</view>
	</view>
   <scroll-view scroll-y :style="{ height: scrollHeight }" class="contain ">
	   <view class="flexjsbac">
	   	<view  style="width: 326rpx;margin: 20rpx;" v-for="item in data">
	   		  <shop-list   ></shop-list>
	   	</view>
	   </view>
	
    
    </scroll-view>
    <view>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar";
import Search from '@/components/search/index'
import shopList from "./components/shopList.vue";
export default {
  name: "index",
  components: { NavBar, Search, shopList },
  data() {
    return {
	  data:[{},{},{},{}],
      current: 0,
      scrollHeight: "",
      heightConfig: {},
	  tabActive:1,
	  type:"warning",
	  value:100,
	  tabList: [
	      { label: '待服务', value: 1 ,moneyShow: false, giveMoneyShow: false, slotName: 'btn'},
	      { label: '服务中', value: 2 ,moneyShow: true, giveMoneyShow: true, slotName: 'addTime'},
	      { label: '待评价', value: 3 ,moneyShow: true, giveMoneyShow: true, slotName: 'wait'},
	      { label: '已评价', value: 4 ,moneyShow: true, giveMoneyShow: true, slotName: 'onceAgain'},
	      { label: '已退单', value: 5 ,moneyShow: true, giveMoneyShow: true, slotName: null},
	  ],
      list5: [
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      ],
      shopData: [
        {
          name: '门店名称',
          address: '哈就开始点击开始打卡机活动空间撒谎的看',
          status:1
        },
        {
          name: '门店名称',
          address: '哈就开始点击开始打卡机活动空间撒谎的看',
          status:2
        },
        {
          name: '门店名称',
          address: '哈就开始点击开始打卡机活动空间撒谎的看',
          status:1
        },
        {
          name: '门店名称',
          address: '哈就开始点击开始打卡机活动空间撒谎的看',
          status:2
        },
        {
          name: '门店名称',
          address: '哈就开始点击开始打卡机活动空间撒谎的看',
          status:2
        }
      ],
      statusBgColor:{
        1:'background: linear-gradient(90deg, rgba(252, 120, 66, 1) 0%, rgba(254, 85, 56, 1) 100%)',
        2:'background: rgba(201, 201, 201, 1);'
      },
      show: false,
      columns: [
          ['中国', '美国', '日本']
      ],

    };
  },
  // created() {
  //   // this.mainHeight = this.$store.getters.heightData.noTabSearchHeight;
  // },
  created() {
    this.heightConfig = this.$store.getters.heightData;
    this.scrollHeight = this.heightConfig.mainSearchHeight - 210 + "px";
  },
  methods: {
    change(e) {
      this.current = e.current
    },
    confirm(e) {
    },
    cancel() {
      this.show=false
    },
    toDetail() {
      uni.navigateTo({
        url:'/subPages/home/shopDetail'
      })
    },
	clickTabsItem(item){
		this.tabActive = item.value
	},
	toCar(){
		uni.navigateTo({
		  url:'/subPages/shopp/shoppingCar'
		})
	}

  }
};
</script>

<style lang="scss" scoped>
::v-deep .u-demo-block {
  padding: 32rpx 38rpx 36rpx 39rpx;
  background: #fff;

  .u-swiper {}
}

.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #FFFFFF;
    font-size: 12px;
  }
}

.city {
  color: rgba(255, 255, 255, 1);
  display: flex;
  margin-right: 20rpx;
  transform: translateY(15rpx);
}

.contain {
  // background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  padding-top: 45rpx;
  .flexjsbac{
	  flex-wrap: wrap;
  }
  .title {
    position: relative;

    .box-line {
      position: absolute;
      left: 0;
      top: 0;
      width: 15rpx;
      height: 48rpx;
      opacity: 1;
      background: rgba(194, 126, 21, 1);

    }

    .text {
      margin-left: 50rpx;
      font-size: 38rpx;
      font-weight: 600;
    }
  }
}
	.box{
		background-color: #FFFFFF;
		margin-right: 20rpx;
		position: relative;
		.badge{
			    position: absolute;
			    padding: 2rpx 5rpx;
			    background-color: #ff0000;
			    border-radius: 20rpx;
			    top: 20rpx;
			    right: -16rpx;
			    font-size: 17rpx;
			    color: #ffffff;
		}
	}
    .tabs-box {
        position: relative;
        display: flex;
        align-items: center;
        height: 100rpx;
        padding: 0 28rpx;
		
		.tabs-item {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 28rpx;
          min-width: 120rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
        }
        .active-item {
          font-weight: bold;
        }
        .bottom-line {
          position: absolute;
          bottom: 0;
          width: 80rpx;
          height: 6rpx;
          background: #C27E15;
          border-radius: 3rpx;
        }
      }
</style>